<template>
  <div class="container">
    <div class="handle-box">
        <span class="handle_spans"></span>
        <span>待结算</span>
      <el-popover
        placement="top-start"
        trigger="hover"
        width="200"
        content="已完成交易，尚未完成结算，不可提现的金额">
        <span style="color:rgb(149,151,149)"  slot="reference">（订单完成次日，可进行提现操作）</span>
        <!-- <el-button>hover 激活</el-button> -->
      </el-popover>
    </div>
    <el-table :data="data" border style="width: 100%;margin-top:20px;">
      <el-table-column prop="id" label="订单编号"></el-table-column>
      <el-table-column prop="goodsName" label="商品名称"></el-table-column>
      <el-table-column prop="discountAmount" label="订单有效金额（不含材料费）">
         
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top"  content="订单有限金额=实际订单金额-材料费">
            <div slot="reference" class="name-wrapper">
              <el-tag>￥{{scope.row.discountAmount }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="divideRatio" label="分成比率">
          <template slot-scope="scope">
            <p>{{scope.row.divideRatio}}</p>
          </template>
      </el-table-column>
      <el-table-column prop="divideAmount" label="待提现金额">
          <template slot-scope="scope">
            <p>￥{{scope.row.divideAmount}}</p>
          </template>
      </el-table-column>
        <el-table-column prop="organizationName" label="机构名称"></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="pageData"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      fengye: 1,
      pageData: undefined,
      visible: false
    };
  },
  created() {
    this.getData();
  },
  computed: {
    data() {
      return this.tableData.filter(d => {
        return d;
      });
    }
  },
  methods: {
    // 分页导航
    handleCurrentChange(val) {
      this.fengye = val;
      this.getData();
    },
    // 获取后台数据
    getData() {
      var that = this;
      let organizationId = JSON.parse(
        localStorage.getItem("organizationIds")
      )[0];
      this.url = "/api/goods/xzs/bill.waiting.order.list.get";
      this.$axios({
        url: this.url,
        method: "post",
        data: {
          organizationId: organizationId,
          pageNum: that.fengye,
          pageSize: "10"
        },
        transformRequest: [
          function(data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          }
        ]
      })
        .then(res => {
          this.tableData = res.data.data.pageList;
          console.log(this.tableData);
          this.pageData = res.data.data.total;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style>
.handle_spans {
  float: left;
  display: block;
  width: 10px;
  height: 20px;
  margin-right: 10px;
  background: rgb(100, 116, 221);
}
</style>
